import React, { useEffect, useState } from 'react'
import { Button, Checkbox, Form, Input, Select, Space, Table, Switch, Divider } from 'antd';
import { SearchOutlined, ManOutlined } from '@ant-design/icons';

import type { ColumnsType } from 'antd/es/table';

import $axios from '../../utils/axios';
import './recordService.less'
import {useNavigate} from 'react-router-dom'
import Details from './details/Details';

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '编号',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    align: 'center',
    render: (i: any) => {
      return <div>
        <img src='https://cdn7.axureshop.com/demo/1881228/images/%E5%B1%85%E6%B0%91%E7%AE%A1%E7%90%86/u3991.png'></img>
        <span>
          {i}
        </span>
      </div>
    }
  },
  {
    title: '身份证',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '签约状态',
    dataIndex: 'name',
    align: 'center',
    render: (i: string) => {
      return <span style={{
        color: '#28d094'
      }}>{i}</span>
    }
  },
  {
    title: '用户标签',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '居民状态',
    dataIndex: 'name',
    align: 'center',
    render: (i: any) => {
      return <Switch checkedChildren="开启" unCheckedChildren="禁用" defaultChecked />
    }
  },
  {
    title: '操作',
    align: 'center',
    width: 200,
    render: () => {
      return <Space size={0} style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
        <Button type="link">查看详情</Button>
        <Button type="link">编辑</Button>
        <Button type="link">发消息</Button>
        <Button type="link">添加服务</Button>
        <Button type="link" style={{ color: 'red' }}>删除</Button>
      </Space>
    }
  },
];

const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const onFinish = (values: any) => {
  console.log('Success:', values);
};

export default function RecordService() {

  let $router=useNavigate()

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // 切换显示样式
  let [is, setIs] = useState(false)
  // 显示全部组件
  let [isAll,setAll]=useState(true)

  // 机构全部数据
  let [organData, setOrg] = useState([])
  // 服务包全部数据
  let [serveData, setSer] = useState([])
  // 居民基本信息
  let [resAll, setRes] = useState([])
  // 居民id
  let [resId,setI]=useState('sss')

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // 机构选择后调用函数 获取医生团队数据
  let getOrgid = (value: any) => {
    OrganId(value)
  }

  //  调接口请求数据
  let show = () => {
    $axios({
      url: '/api/getAllBasicResidentBySearch',
      method: 'post'
    }).then((res) => {
      setRes(res.data)

    })
  }

  // 获取机构所有数据
  let organAll = () => {
    $axios({
      url: '/api/getAllChcsOrgan',
      method: 'post'
    }).then((res) => {
      setOrg(res.data.rows)

    })
  }
  // 获取所有服务包数据
  let serveAll = () => {
    $axios({
      url: '/api/getAllChcsService',
      method: 'post'
    }).then((res) => {
      console.log(res);
      setSer(res.data.rows)

    })
  }

  // 根据机构获取医生团队
  let OrganId = (id: string) => {
    $axios({
      url: '/api/getTeamByOrganId',
      method: 'post',
      data: id
    }).then((res) => {
      console.log(res, '医生团对');

    })
  }


  // 跳转详情
  let jwp=(id:string)=>{
    setI(id)
    setAll(false)
  }

  // 转给子组件数据
  let send=()=>{
    setAll(true) 
  }

  // 初次渲染页面触发函数
  useEffect(() => {
    show()
    organAll()
    serveAll()

  }, [])
  return (
    <div style={{ padding: 20, position: 'relative', width: '85%', margin: '0 auto', backgroundColor: '#fff',height:'800px',overflow:'scroll' }}>
      <h3>{isAll? '居民管理':'居民详情'}</h3>
      {
        isAll ? <>
        <Form
        name="basic"
        labelCol={{ span: 8, color: 'red' }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 1000 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
        layout='inline'
      >
        <Space align='start' wrap={true} size='large' >
          <Form.Item
            label="签约状态"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Select style={{ width: '200px' }}>
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="签约机构"
            name="organId"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Select style={{ width: '200px' }} placeholder='请选择签约机构' onChange={getOrgid}>
              {
                organData.map((i: any, j: number) => {
                  return <Select.Option value={i.id} key={j}>{i.name}</Select.Option>
                })
              }

            </Select>
          </Form.Item>

          <Form.Item
            label="医生团队"
            name="teamId"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Select style={{ width: '200px' }}>
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="服务包"
            name="serviceId"
            rules={[{ required: true, message: 'Please input your password!' }]}
            style={{ paddingLeft: '5px' }}
          >
            <Select style={{ width: '200px' }} placeholder='请选择服务包'>
              {
                serveData.map((i: any, j: number) => {
                  return <Select.Option value={i.id} key={j}>{i.name}</Select.Option>
                })
              }
            </Select>
          </Form.Item>

          <Form.Item
            label="居民标签"
            name="labelIdStr"
            rules={[{ required: true, message: 'Please input your password!' }]}
            style={{ paddingLeft: '10px' }}

          >
            <Select style={{ width: '200px' }}>
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="searchKey"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input placeholder='请输入关键字' style={{ width: '300px' }} />
          </Form.Item>

          <Form.Item style={{ position: 'relative', top: -56, left: 950 }}>
            <Button type="primary" icon={<SearchOutlined />}>
              搜索
            </Button>
          </Form.Item>
        </Space>

      </Form>
      <Button type="primary" style={{ position: 'absolute', top: 48, left: 970 }}>
        新建居民档案
      </Button>

      <div className='max'>
        {is ? <Table rowSelection={rowSelection} columns={columns} dataSource={data} size='small' /> : <></>}
        <div className='min'>
          {
            resAll.map((i:any,j:number)=>{
              return  <div className='one' key={j} onClick={()=>jwp(i.id)}>
              <div className='img'><img src='https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1153.png'></img></div>
              <div className='name'>
                <span>{i.name}</span><span style={{marginLeft:'10px'}}>26 <ManOutlined style={{ color:i.gender? 'red':'blue' }} /></span>
              </div>
              <div className='sig'>签约中</div>
              <div className='icon'>
                <span>糖尿病</span>
                <span>糖尿病</span>
                <span>糖尿病</span>
              </div>
            </div>
            })
          }
        </div>
      </div>
        </> : <Details id={resId} send={send}></Details>
      }
    </div>
  )
}
 